<template>
    <div>
        <van-nav-bar title="购物车" left-text="返回" left-arrow @click-left="() => { $router.push('/goods') }" />
            <van-empty v-if="!store.carts.length"
  image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
  image-size="80"
  description="购物车空空如也"
>
<router-link to="/goods">快去加入你喜欢的商品吧</router-link>
</van-empty>

        <van-swipe-cell v-else v-for="item in store.carts">
            <van-card>
                <template #thumb>
                    <div style="display: flex;">
                        <van-checkbox v-model="item.checked"></van-checkbox>
                        <van-image width="80" height="80" :src="item.goods.goods_big_logo" />
                    </div>
                </template>
                <template #title>
                    <div style="font-weight: bold;">
                        {{ item.goods.goods_name }}
                    </div>
                </template>
                <template #price>
                    <div style="color: red;">
                        ${{ item.goods.goods_price }}
                    </div>
                </template>
                <template #num>
                    <van-stepper v-model="item.number" />
                </template>
            </van-card>
            <template #right>
                <van-button square @click="delshop(item.id)" text="删除" type="danger" class="delete-button" style="height: 100%;"/>
            </template>
        </van-swipe-cell>
    </div>
    <van-submit-bar v-if="store.carts.length" :price="allprice * 100" button-text="去结算" @submit="onSubmit" style="margin-bottom: 50px;">
        <van-checkbox v-model="selectall">全选</van-checkbox>
        <template #tip>
            <span @click="onClickLink">修改地址</span>
        </template>
    </van-submit-bar>

</template>

<script setup>
import { computed, ref } from 'vue'
import { useCounterStore } from '../../store/storeCart'
// 可以在组件中的任意位置访问 `store` 变量 ✨
const store = useCounterStore()
//删除
const delshop = (id) => {
    store.delcart(id)
}
//全选
const selectall = computed({
    get() {
        if (store.carts.length == 0) {
            return false
        } else {
            return store.carts.every(item => item.checked)
        }
    },
    set(val) {
        return store.carts.forEach(item => item.checked = val)
    }
})
//总价格
const allprice = computed(() => {
    let allprice = 0
    let checkeds = store.carts.filter(item => item.checked)
    checkeds.forEach(item => {
        allprice += item.number * item.goods.goods_price
    })
    return allprice
})
</script>

<style lang="scss" scoped></style>